<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" >
        <title>积分</title>
        <link rel="stylesheet" href="../vender/css/normalize.css">
        <link rel="stylesheet" href="integral.css">
        <link rel="stylesheet" href="../public_css/public_header.css">
        <style>
            #listWrapper li>div{
                width: 50%;
            }
        </style>
    </head>
    <body>


        <header class=" public_header">
            <div class="public_header_return">
                <img src="../public_img/return.png" alt="" class="public_header_return" onclick="history.back(-1)">
                <p>积分商城</p>
            </div>
        </header>

        <section>
            <div class="howMuch-point">
                <p>已有积分：<span id="score">加载中</span></p>
            </div>
            <div class="main" id="main">
                <ul class="list-group" id="listWrapper">
                    <!--<li class='list-group-item'>-->
                    <!--<div class='prize'>-->
                    <!--<div class='prize-info prize-info1'>-->
                    <!--<img src='squre.png'>-->
                    <!--<h4>可兑换商品<i>1200</i></h4>-->
                    <!--<hr/>-->
                    <!--<p>可兑换商品可兑换商品可兑换商品可兑换商品可兑换商品</p>-->
                    <!--</div>-->
                    <!--<div class='prize-info prize-info2'>-->
                    <!--<img src='squre2.png'>-->
                    <!--<h4>可兑换商品<i>1200</i></h4>-->
                    <!--<hr/>-->
                    <!--<p>可兑换商品可兑换商品可兑换商品可兑换商品可兑换商品</p>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class='prize'>-->
                    <!--<div class='prize-info prize-info2'>-->
                    <!--<img src='squre2.png'>-->
                    <!--<h4>可兑换商品<i>1200</i></h4>-->
                    <!--<hr/>-->
                    <!--<p>可兑换商品可兑换商品可兑换商品可兑换商品可兑换商品</p>-->
                    <!--</div>-->
                    <!--<div class='prize-info prize-info1'>-->
                    <!--<img src='squre.png'>-->
                    <!--<h4>可兑换商品<i>1200</i></h4>-->
                    <!--<hr/>-->
                    <!--<p>可兑换商品可兑换商品可兑换商品可兑换商品可兑换商品</p>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</li>-->

                </ul>
            </div>

            <div class="detail_popup hidden">

                <div class="det-popup-cont">
                    <div class="det-pop-header">
                        <span id="a_goods_name"></span>
                    </div>
                    <div class="det-pop-img" style="width: 80%">
                        <div style="width: 100%">
                            <img style="width: 100%;height: 100%" id='a_goods_img' src="" />
                        </div>
                    </div>
                    <div class="det-pop-detail">
                        <span id="a_goods_intro"></span>
                    </div>

                    <!--地址-->
                    <div class="get_intergral_adress">
                        <span>地址：</span>
                        <input type="text" placeholder="请填写地址" class="get_intergral_adressinput">
                    </div>

                    <div class="pro-detail-cont">

                        <div class="back-btn">

                        </div>
                        <div class="detail-sect">
                          <div class="det-pro-pop">
                              <span>消耗积分</span>
                              <span class="a_goods_score">12</span>
                          </div>
                          <div class="det-pro-pop">
                              <span>兑换后剩余</span>
                              <span id="a_score">4964</span>
                              <input type="text" id="id" value="26" style="display: none">
                          </div>
                          <div class="last">
                              <div class="back-btn" id="abtn" onclick="history.back()">返回</div>
                              <div id="quer"  onclick="buy()"  class="btn-pro-pop">
                                  确认兑换
                              </div>
                          </div>
                        </div>




                    </div>
                </div>
            </div>
        </section>
        <script src="../jquery.min.js"></script>
        <script src="../vender/src/picturefill.js"></script>
        <script src="index.js"></script>
        <script src="../layer.js"></script>
        <script>
            $(function () {
                var token = localStorage.phone;
                $.ajax({
                    url:'https://newapp.icandrive.cn/api/score.php',
                    type:'post',
                    dataType:'json',
                    data:{token:token},
                    success:function(data){
                        if(data.status==200){
                            $('#score').text(data.score);
                            $(data.data).each(function () {
                                var leng=this.length;
                                if(leng==4){
                                    $('#listWrapper').append("<li class='list-group-item'>"+
                                                             "<div class='prize'>"+
                                                             "<div class='prize-info prize-info1' id='"+this[0].id+"'>"+
                                                             "<img src='https://newapp.icandrive.cn/tp/Uploads/"+this[0].goods_pic+"' >"+
                                                             "<h4>"+this[0].goods_name+"<i>"+this[0].goods_score+"</i></h4>"+
                                                           /*  "<hr/>"+*/
                                                             "<p>"+this[0].goods_intro+"</p>"+
                                                             "</div>"+
                                                             "<div class='prize-info prize-info2'  id='"+this[1].id+"'>"+
                                                             "<img src='https://newapp.icandrive.cn/tp/Uploads/"+this[1].goods_pic+"'>"+
                                                             "<h4>"+this[1].goods_name+"<i>"+this[1].goods_score+"</i></h4>"+
                                                             "<hr/>"+
                                                             "<p>"+this[1].goods_intro+"</p>"+
                                                             "</div>"+
                                                             "</div>"+
                                                             "<div class='prize'>"+
                                                             "<div class='prize-info prize-info2'  id='"+this[2].id+"'>"+
                                                             "<img src='https://newapp.icandrive.cn/tp/Uploads/"+this[2].goods_pic+"'>"+
                                                             "<h4>"+this[2].goods_name+"<i>"+this[2].goods_score+"</i></h4>"+
                                                             "<hr/>"+
                                                             "<p>"+this[2].goods_intro+"</p>"+
                                                             "</div>"+
                                                             "<div class='prize-info prize-info1'  id='"+this[3].id+"'>"+
                                                             "<img src='https://newapp.icandrive.cn/tp/Uploads/"+this[3].goods_pic+"'>"+
                                                             "<h4>"+this[3].goods_name+"<i>"+this[3].goods_score+"</i></h4>"+
                                                             "<hr/>"+
                                                             "<p>"+this[3].goods_intro+"</p>"+
                                                             "</div>"+
                                                             "</div>"+
                                                             "</li>")
                                }else if(leng==3){
                                    $('#listWrapper').append("<li class='list-group-item'>"+
                                                             "<div class='prize'>"+
                                                             "<div class='prize-info prize-info1' id='"+this[0].id+"'>"+
                                                             "<img src='https://newapp.icandrive.cn/tp/Uploads/"+this[0].goods_pic+"' >"+
                                                             "<h4>"+this[0].goods_name+"<i>"+this[0].goods_score+"</i></h4>"+
                                                             "<hr/>"+
                                                             "<p>"+this[0].goods_intro+"</p>"+
                                                             "</div>"+
                                                             "<div class='prize-info prize-info2'  id='"+this[1].id+"'>"+
                                                             "<img src='https://newapp.icandrive.cn/tp/Uploads/"+this[1].goods_pic+"'>"+
                                                             "<h4>"+this[1].goods_name+"<i>"+this[1].goods_score+"</i></h4>"+
                                                             "<hr/>"+
                                                             "<p>"+this[1].goods_intro+"</p>"+
                                                             "</div>"+
                                                             "</div>"+
                                                             "<div class='prize'>"+
                                                             "<div class='prize-info prize-info2'  id='"+this[2].id+"'>"+
                                                             "<img src='https://newapp.icandrive.cn/tp/Uploads/"+this[2].goods_pic+"'>"+
                                                             "<h4>"+this[2].goods_name+"<i>"+this[2].goods_score+"</i></h4>"+
                                                             "<hr/>"+
                                                             "<p>"+this[2].goods_intro+"</p>"+
                                                             "</div>"+
                                                             "</li>")
                                }else if(leng==2){
                                    $('#listWrapper').append("<li class='list-group-item'>"+
                                                             "<div class='prize'>"+
                                                             "<div class='prize-info prize-info1' id='"+this[0].id+"'>"+
                                                             "<img src='https://newapp.icandrive.cn/tp/Uploads/"+this[0].goods_pic+"' >"+
                                                             "<h4>"+this[0].goods_name+"<i>"+this[0].goods_score+"</i></h4>"+
                                                             /*"<hr/>"+*/
                                                             "<p>"+this[0].goods_intro+"</p>"+
                                                             "</div>"+
                                                             "</div>"+
                                                             "<div class='prize'>"+
                                                             "<div class='prize-info prize-info2' id='"+this[1].id+"'>"+
                                                             "<img src='https://newapp.icandrive.cn/tp/Uploads/"+this[1].goods_pic+"'>"+
                                                             "<h4>"+this[1].goods_name+"<i>"+this[1].goods_score+"</i></h4>"+
                                                             "<hr/>"+
                                                             "<p>"+this[1].goods_intro+"</p>"+
                                                             "</div>"+
                                                             "</li>")
                                }else{
                                    $('#listWrapper').append("<li class='list-group-item'>"+
                                                             "<div class='prize'>"+
                                                             "<div class='prize-info prize-info1'  id='"+this[0].id+"'>"+
                                                             "<img src='https://newapp.icandrive.cn/tp/Uploads/"+this[0].goods_pic+"' >"+
                                                             "<h4>"+this[0].goods_name+"<i>"+this[0].goods_score+"</i></h4>"+
                                                             "<hr/>"+
                                                             /*"<p>"+this[0].goods_intro+"</p>"+*/
                                                             "</div>"+
                                                             "</li>")
                                }
                                $(".prize-info").click(function(){
                                    var score=parseInt($(this).find('i').text());
                                    var myScore=parseInt($('#score').text());
                                    if(myScore-score<0){
                                        layer.msg('积分不足')
                                    }else{
                                        $(".detail_popup").removeClass("hidden")
                                        $(".detail_popup").addClass("show")
                                        var id =$(this).attr('id');
                                        var goods_name =$(this).find('h4').html().split("<")[0];
                                        var img=$(this).find('img').prop('src');
                                        $('#a_goods_name').html(goods_name);
                                        $('#a_goods_img').prop('src',img);
                                        $('#a_goods_score').html(score);
                                        $('#a_score').html(myScore-score);
                                        $('#id').val(id);
                                    }
                                })


                            });
                        }
                    },
                    error:function(){
                        layer.msg('系统维护中',function(){
                            history.go(0)
                        },1000);
                    }

                });
            });
            function buy(){
                var need_score = $('#a_goods_score').html();
                var goods_id = $('#id').val();
                var get_intergral_adressinput = $(".get_intergral_adressinput").val();
                console.log(get_intergral_adressinput );
                var token = localStorage.phone;
                $.ajax({
                    url:'https://newapp.icandrive.cn/api/buy_goods.php',
                    type:'post',
                    dataType:'json',
                    data:{token:token,need_score:need_score,goods_id:goods_id,number:1,user_address:get_intergral_adressinput},
                    success:function(data){
                        if(data.status==200){
                            $('#score').text($('#a_score').html());
                            layer.msg('购买成功');
                            $(".detail_popup").removeClass("show")
                            $(".detail_popup").addClass("hidden")
                        }else{
                            layer.msg('购买失败');
                        }
                    }
                })
            }
        </script>

        <script>
            document.addEventListener("plusready", function() {
                // 注册返回按键事件
                plus.key.addEventListener('backbutton', function() {
                    window.history.back();
                }, false);
                //此处false代表不退出页面，如果为true回退到上一个一面
            });
        </script>
    </body>
</html>
